// console.log(1);
// 获取元素
const table = document.querySelector('.list')
const total = document.querySelector('.total')
// 请求获取数据 封装函数
const getStudentList = async () => {
  const res = await axios({ url: '/students' })
  // console.log(res)
  // 渲染页面
  const htmlStr = res.data
    .map((item) => {
      return `
    <tr>
      <td>${item.name}</td>
      <td>${item.age}</td>
      <td>${item.gender ? '男' : '女'}</td>
      <td>第${item.group}组</td>
      <td>${item.hope_salary}</td>
      <td>${item.salary}</td>
      <td>${item.province + item.city + item.area}</td>
      <td>
        <a href="javascript:;" class="text-success mr-3"
          ><i class="bi bi-pen" data-id="${item.id}"></i
        ></a>
        <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id="${
          item.id
        }"></i></a>
      </td>
    </tr>
    `
    })
    .join('')
  table.innerHTML = htmlStr
  total.innerHTML = res.data.length
}
getStudentList()

// 初始化模态框 & 城市选择
// bootstrap的模态框直接cv即可
const modalBox = document.querySelector('#modal')
const modal = new bootstrap.Modal(modalBox)
const ps = document.querySelector('[name=province]')
const cs = document.querySelector('[name=city]')
const as = document.querySelector('[name=area]')
// 获取模态框的form
const form = document.querySelector('#form')
// 获取提交数据按钮
const submitStudent = document.querySelector('#submit')

// 获取省份
const provinceList = async () => {
  const res = await axios({ url: '/api/province' })
  // 渲染省份下拉框
  const provinceStr = res.data
    .map((item) => {
      return `<option value="${item}">--${item}--</option>`
    })
    .join('')
  ps.innerHTML = `<option value="">--省份--</option>${provinceStr}`
  // 城市
  ps.addEventListener('change', async function () {
    // 选择省份的时候后面的返回默认值
    cs.innerHTML = `<option value="">--城市--</option>`
    as.innerHTML = `<option value="">--地区--</option>`
    // 如果value是空时不发请求
    if (!ps.value) return
    const res = await axios({ url: '/api/city', params: { pname: ps.value } })
    const cityStr = res.data
      .map((item) => {
        return `<option value="${item}">--${item}--</option>`
      })
      .join('')
    cs.innerHTML = `<option value="">--城市--</option>${cityStr}`
  })
  // 地区
  cs.addEventListener('change', async function () {
    as.innerHTML = `<option value="">--地区--</option>`
    // 如果value是空时不发请求
    if (!cs.value) return
    const res = await axios({
      url: '/api/area',
      params: { pname: ps.value, cname: cs.value },
    })
    const areaStr = res.data
      ?.map((item) => {
        return `<option value="${item}">--${item}--</option>`
      })
      .join('')
    as.innerHTML = `<option value="">--地区--</option>${areaStr}`
  })
}
provinceList()

// 打开模态框
const openModal = document.querySelector('#openModal')
openModal.addEventListener('click', function () {
  // 打开模态框的时候数据清空
  form.reset()
  // 再打开之前添加自定义属性自己添加
  modalBox.dataset.id = 'add'
  // 改标题
  modalBox.querySelector('.modal-title').innerHTML = '添加学员'

  modal.show()
})

// 给提交按钮绑定点击事件
submitStudent.addEventListener('click', async function () {
  // 获取表单内容
  const data = serialize(form, { hash: true })
  if (!data.age) return alert('年龄不能为空')
  if (!data.hope_salary) return alert('期望薪资不能为空')
  if (!data.salary) return alert('薪资不能为空')
  if (!data.gender) return alert('性别不能为空')
  if (!data.group) return alert('组别不能为空')
  modalBox.querySelector('#cb01').checked?data.gender=1:data.gender=0

  //更改数据类型
  data.age = +data.age
  data.gender = +data.gender
  data.hope_salary = +data.hope_salary
  data.salary = +data.salary
  data.group = +data.group
  // 判断不能为空
  // for (let key in data) {
  //   if(!data[key]===null) return alert('内容不能为空')
  // }
  // 限制必填项不能为空

  
  // 判断组号为1-8
  if (data.group < 1 || data.group > 8) return alert('请输入正确的组号')
  if (modalBox.dataset.id === 'add') {
    try {
      // 发起请求
      const res = await axios({ url: '/students', method: 'post', data })
      // 显示添加成功
      alert(res.message)
      // 关闭模态框
      modal.hide()
      // 渲染页面
      getStudentList()
  
      // console.log(res);
    } catch (error) {
      alert(error)
    }
  }
  // 如果自定义属性不是add那就是修改表单
  else {
    try {
      const res = await axios({url:'/students/'+modalBox.dataset.id,method:'put',data})
      // 显示添加成功
      alert(res.message)
      // 关闭模态框
      modal.hide()
      // 渲染页面
      getStudentList()
    } catch (error) {
      alert(error)
    }
  }
  
})

//事件委托
table.addEventListener('click', async function (e) {
  if (e.target.classList.contains('bi-pen')) {
    // console.log('编辑');
    // 获取学生id
    const id = e.target.dataset.id
    // 发起请求
    const res = await axios({ url: '/students/' + id })
    // 获取modal里所有属性name的表单
    const nodeList = modalBox.querySelectorAll('[name]')
    // 遍历nodeList
    nodeList.forEach((item) => {
      // 如果遇到性别时做判断
      if (item.name === 'gender') {
        // 是1的话为男，0的话是女
        res.data[item.name]
          ? (modalBox.querySelector('#cb01').checked = true)
          : (modalBox.querySelector('#cb02').checked = true)
      }
      // 赋值
      item.value = res.data[item.name]
    })
    // 渲染城市下拉框
    const { data: cityData } = await axios({
      url: '/api/city',
      params: { pname: res.data.province },
    })
    const cityStr = cityData
      .map((item) => {
        return `<option value="${item}">--${item}--</option>`
      })
      .join('')
    cs.innerHTML = `<option value="">--城市--</option>${cityStr}`
    // 给城市下拉框赋值
    cs.value = res.data.city

    // 渲染地区下拉框
    const { data: areaData } = await axios({
      url: '/api/area',
      params: { pname: res.data.province, cname: res.data.city },
    })
    const areaStr = areaData
      .map((item) => {
        return `<option value="${item}">--${item}--</option>`
      })
      .join('')
    as.innerHTML = `<option value="">--城市--</option>${areaStr}`
    // 给地区下拉框赋值
    as.value = res.data.area
      //修改表单自定义属性
    modalBox.dataset.id = id
    
      //修改标题
      modalBox.querySelector('.modal-title').innerHTML = '修改学员'
    
    // 打开modal层
      modal.show()
  }
  if (e.target.classList.contains('bi-trash')) {
    // to do
    // console.log('删除')
    // 获取学生id
    const id = e.target.dataset.id
    try {
      const res = await axios({ url: '/students/' + id, method: 'DELETE' })
      alert('删除成功')
      getStudentList()
    } catch (error) {
      
    }
  }
})
